<template>
	<view class="bod">
		<view class="header">
			<p @click='tit_show=!tit_show' class='headtxt'>{{title_txt}}
				<image v-show="!tit_show" style="width: 28rpx;height:28rpx;transform: rotate(0deg);" src="@/static/newimg/home/bottomjt.png"
					></image>
				<image v-show="tit_show" style="width: 28rpx;height: 28rpx;transform: rotate(180deg);" src="@/static/newimg/home/bottomjt.png"
					></image>
			</p>
			<el-collapse-transition>
				<view v-show="tit_show" class="titlists">
					<view   class="titlist" v-for="(a,index) in title_list" :key="index" @click="handtitle(a)">
						<p class='headtxt'>{{a}}</p>
					</view>
				</view>
			</el-collapse-transition>
		</view>
		<!-- banner -->
		<view class="bodys">
				<!-- <u-swiper :interval='5000' imgMode='widthFix' :list="list1" @change="swchange" @click="swclick">
				</u-swiper -->
				<!-- 图片轮播图 -->
				<swiper class="swiper" style="height: 118px;" :indicator-dots="true" :autoplay="true"
				    interval="5000" duration="500" :circular="true"
				    indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#fff">
				    <swiper-item v-for="(src,index) in list1" :key="index">
				        <view class="swiper-item">
				            <image style="width: 100%;border-radius: 6px 6px 0 0;height:118px;"
				                :src="src"></image>
				        </view>
				    </swiper-item>
				</swiper>
				<!-- 文字轮播图 -->
				<view
				    style="box-shadow: rgb(0 10 47 / 6%) 1px 1px 6px 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;display: flex;align-items: center;border-radius: 0 0 6px 6px;">
				    <an-notice-bar bgColor="rgb(255 255 255)" color="#333" :showSerial="false" :switchTime=5
				        style="margin: 0;width: 100%;" :text="noticeList"></an-notice-bar>
				</view>
			<view style="height: 16rpx;">

			</view>
			<!-- 菜单列表 -->
			<view class="grid">
				<view class="grid-item-3" v-for="(item, index) in workflowList" :key="item.appId" @click='openWorkflowfrom(item.appId,item.title)'>
					<view style="display: flex;  align-items: center; justify-content: center;  flex-direction: column;">
						<view class="image"><image style="height:80upx; width: 80upx;" :src="item.description"></image></view>
						<view class="titles" style="font-size: 28upx;">{{ item.title }}</view>
					</view>
				</view>
			    <view class="grid-item-3" v-for="(item, index) in navs" :key="index" @click='ngtopared(item.txt)'>
			    	<view style="display: flex;  align-items: center; justify-content: center;  flex-direction: column;">
			    		<view class="image"><image style="height:80upx; width: 80upx;" src="../../static/oa/danju.png"></image></view>
			    		<view class="titles" style="font-size: 28upx;">{{ item.txt }}</view>
			    	</view>
			    </view>
			</view>
			<view style="height: 16rpx;"></view>
			<!-- //待办事项 -->
			<view class="mine">
				<ul>
					<li v-for="(item, index) in minelist" :key="index" @click='ngtopared(item.text)'>
						<p style='text-align: left;position: relative;padding-left: 10rpx;'>
							<!-- 首字母加下划线 -->
							<label class="title_label"><i
									style='text-decoration:underline'>{{ item.num.slice(0, 1) }}</i>
								<!-- /分割后不带下划线的数字 -->
								<span v-if="item.num.length > 1">{{ item.num.slice(1, 5) }}</span>
								<u-badge v-if="item.off" :offset='positions' :absolute="true" :isDot="true"
									type="primary">
								</u-badge>
							</label>
						</p>
						<p style='font-size: 28rpx;width: 120rpx;'>{{ item.text }}</p>
					</li>
				</ul>
			</view>


			<view style="height: 16rpx;"></view>

			<!-- <view class="nav">
				<u-tabs :activeStyle="{
						color: '#3E86F9',
						fontWeight: 'normal',
					}" :inactiveStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
						}" lineWidth='50' style='text-align: center;' :list="list2"></u-tabs>
				<u-line></u-line>
			</view> -->
			<view class="box4">
				<view class="box4-start-title">
					<view class="el-tabs__active-bar_box4" :style="{backgroundColor:$oaconfig.backgroundColor}"></view>
					<view class="box4-item-num" v-if="tablist.length > 0" :style="{backgroundColor:$oaconfig.backgroundColor}">{{tablist.length}}</view>
					<view class="start-title-btna" style="width: 150upx;justify-content: left;">
						<text ref="box4titleName0" class="name" :style="{color:$oaconfig.backgroundColor}">待报销</text>
					</view>
				</view>
				<!-- //待报销列表 -->
				<view class="bwork" v-if="tablist.length > 0">
					<ul>
						<li v-for="(tab, index) in tablist" :key="index">

							<view style="display: flex;">
								<view style="flex: 1">
									<image src="../../static/oa/danju.png" mode="widthFix" style="width: 80%;"></image>
								</view>
								<view class="Hawork">
									<p style='font-size: 28rpx;'><b>{{getTripType(tab.tripType)}}{{ tab.busiTripNo }}</b></p>
									<p><span class='sright-index'>日期</span> {{ tab.startDate.substring(0,16) }}~{{tab.endDate.substring(0,16)}}</p>
									<!-- <p><span class='sright-index'>地点</span> {{ tab.address }}</p> -->
									<p><span class='sright-index'>事由</span> {{ tab.tripReasion }}</p>
									<!-- <view @click="handgoon(index)" class="gtbx">
										<p class='qbx'>去报销 </p>
										<image src="../../../static/newimg/jt.png" style="width:25rpx;" mode="widthFix">
										</image>
									</view> -->
								</view>
							</view>
						</li>
					</ul>
				</view>
				<view v-if="tablist.length == 0" style="height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 10%;">
				    <view style="width: 200upx;height: 200upx;">
				        <image style="width: 100%;height: 100%;" src="../../static/oa/BG-blue@3x.png">
				        </image>
				    </view>
				    <view style="font-size: 28upx;margin-top: 20upx;">暂无数据</view>
				</view>
			</view>
			<!-- 底部 -->
			<view style="height: 10rpx;"></view>
		</view>


	</view>
</template>

<script>
	import anNoticeBar from '@/workspaces/components/uni-notice-bar/index-notice-bar.vue';
	export default {
		data() {
			return {
				current: 0,
				title_list: ['东风本田汽车零部件有限公司'],
				title_txt: '东风本田汽车零部件有限公司',
				tit_show: false, //控制显示隐藏
				noticeList: [],
				list1: [
					'/static/newimg/shouyeNewImg/bannerIndexOne.png',
					'/static/newimg/shouyeNewImg/banner-dfnf@3x.png',
				],
				workflowList: [],
				navs: [/* { //导航栏
						img: '../../../static/newimg/home/u195.png',
						txt: '出差申请',
						title: 'setup'
					},
					{
						img: '../../../static/newimg/home/u56.png',
						txt: '出差变更',
						title: 'change'
					},
					{
						img: '../../../static/newimg/home/u210.png',
						txt: '出差报销',
						title: 'travel'
					}, */
					{
						img: '../../static/oa/danju.png',
						txt: '单据审批',
						title: 'order'
					},
				],
				// 代办列表
				minelist: [{
						num: '0',
						text: '我的待办',
						off: 1
					},
					{
						num: '0',
						text: '我发起的',
					},
					{
						num: '0',
						text: '我审阅的'
					},
					{
						num: '0',
						text: '我暂存的'
					},
				],
				// tabs
				list2: [{
					name: '待报销',
					badge: {
						value: 3,
						bgColor: 'rgb(69,134,253)'
					}
				}],
				// 项目数据 
				tablist: [],
				positions: [0, -15] //圆点的位置
			}
		},
		components: {
		    anNoticeBar
		},
		onLoad() {
			this.getlist()
			this.getBusiTripList()
			this.lyNotice()
			this.getStartWorkflowListJson()
			this.$lyRequest.get('/gateway/basedata/mp/dbsap/trip/sysUser/appUserInfo.do', {}).then(data => {
				if (data.data.result == "1") {
					this.$oaconfig.userData= data.data.rows;
				}
			});
		},
		created() {
			
		},
		onPullDownRefresh: function() {
			//下拉刷新
			var that = this;
			window.location.reload();
			// that.loadCount();
			// that.loadApps();
			uni.stopPullDownRefresh();
		},
		methods: {
			//获取发起流程菜单
			getStartWorkflowListJson(){
				let that = this
				that.$myObject.toAjaxJson('/workflow/workflowBusiness/', "getStartWorkflowListJson", {
					searchkey: "",
					isMobile: "1"
				}, function(res) {
					if(res.success){
						that.workflowList= res.data;
					}
				});
			},
			//公告
			lyNotice() {
			    let _this = this;
			    let senData = {
			        category: 'listnotice',
			        _search: false,
			        sortfield: 'last_updated_time',
			        sort: 'desc',
			        pagesize: 10,
			        pageindex: 1,
			        tenancyId: '98336883-bc5c-11ec-998c-005056a87c64',
			    }
			    _this.$lyRequest.get('/gateway/allinoneservice/mp/notice/list.do', senData).then(result => {
					if (result.data.result == 1) {
						_this.noticeList = result.data.rows
					}
				})
				.catch(e => {
					// 请求失败
				});
			},
			//获取未报销的申请单
			getBusiTripList(){
				var _this = this;
				let userInfo= _this.$api.getUserInfo();
				_this.$lyRequest.get("/gateway/reim/mp/dbsap/busiTripmEntity/queryBusiTripList.do", {
				 empNo: userInfo.userid
				}).then(result=>{
				  if(result.data && result.data.result == 1){
				    _this.tablist = result.data.rows.records;
				  }else{
				    _this.$api.showTip(result.data.msg);
				  }
				});
			},
			getlist() {
				let that = this
				that.$myObject.toAjaxJson('/rest/api/processEnactmentApi/', "getMyListTaskCountJson", {
					instanceType: 'All'
				}, function(res) {
					if (res.code == 404) {
						console.log(404)
					}
					that.countData = res.data;
					that.minelist[0].num = that.countData.todoCount + '' // todayTodoCount 今日代办
					that.minelist[1].num = that.countData.myStartCount + '' // 发起 myStartCount
					that.minelist[2].num = that.countData.doneCount + '' //审阅
					that.minelist[3].num = that.countData.myDraftCount + '' // myDraftCount 保存
					// // 判断光点位置
					if (that.minelist[0].num == 0) {
						delete(that.minelist[0].off)
					}
				});

			},
			//打开发起流程
			openWorkflowfrom(appId, title) {
				if(appId == "AW"){
					uni.navigateTo({
						url: "../Travelchange/Trchange?appId=" + appId
					})
				} else {
					var url = __webpath + "/workflow/businessMP/workflowform?appId=" + appId;
					FUI.Window.ngto(url);
				}
			},
			handtitle(a) { //改变标题
				this.title_txt = a
				this.tit_show = false
				console.log(a)
			},
			//轮播图滑动
			swchange() {

			},
			//轮播图点击
			swclick() {

			},
			//报销
			handgoon(v) {
				console.log(v)
			},
			handntgo(n) {
				switch (n) {
					case 'setup':
						this.$jump('../../components/application/setup', 'navigate');
						break;
					case 'change':
						this.$jump('../../components/Trchange', 'navigate');
						break;
					case 'travel':
						this.$jump('../../components/Travel', 'navigate');
						break;
					case 'order':
						this.$jump('../../components/Workflow/release', 'navigate');
						break;
				}

			},
			ngtoorder() {
				uni.switchTab({
					url: '../order'
				})
			},
			// 代办列表
			ngtopared(v) {
				switch (v) {
					case '我的待办':
						uni.setStorageSync("currentIndex", 0);
						this.ngtoorder()
						break;
					case '我发起的':
						uni.setStorageSync("currentIndex", 1);
						this.ngtoorder()
						break;
					case '我审阅的':
						uni.setStorageSync("currentIndex", 2);
						this.ngtoorder()
						break;
					case '我暂存的':
						uni.setStorageSync("currentIndex", 3);
						this.ngtoorder()
						break;
					case '单据审批':
						uni.setStorageSync("currentIndex", 0);
						this.ngtoorder()
						break;
				}
			},
			getTripType(code){
				switch(code){
					case '0': return "工作出差"; break;
					case '1': return "培训出差"; break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bod {
		width: 100%;
		height: auto;
		background-color: rgb(248, 249, 251);

		.header {
			background-color: white;
			padding: 30rpx 10rpx 10rpx 10rpx;

			.headtxt {
				width: 96%;
				margin: 0 auto;
				font-size: 36rpx;
				padding-bottom: 20rpx;
				font-weight: bold;
			}

			

			image {
				margin-left: 20rpx;
				width: 28rpx;
			}
		}
		.grid {
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap;
		    background-color: #fff;
			border-radius: 12rpx;
		    // border-top: 2upx solid rgba(172, 172, 172, 0.2);
		    .grid-item-3 {
		        box-sizing: border-box;
		        width: calc(100% / 4);
		        // border-bottom: 2upx solid rgba(172, 172, 172, 0.2);
		        // border-right: 2upx solid rgba(172, 172, 172, 0.2);
		        text-align: center;
		        padding: 18upx 0;
		        display: flex;
		        justify-content: center;
		        align-items: center;
		        flex-direction: column;
		
		        .image {
		            width: 84upx;
		            height: 84upx;
		            // background-color: #00ba62;
		            border-radius: 50%;
		            display: flex;
		            align-items: center;
		            justify-content: center;
		            margin: 0 20upx;
		            .icons {
		                font-size: 45upx;
		                color: #fff;
		            }
		        }
		
		        .titles {
		            font-size: 28upx;
		            color: #404040;
		        }
		    }
		
		    .grid-item-3:nth-child(3n + 3),
		    .grid-item-4:nth-child(4n + 4) {
		        border-right: none;
		    }
		}
	}
	.bodys {
		width: 96%;
		margin: 0 auto;
	}
	
	.card {
		border-radius: 12rpx;
		background-color: white;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 6rpx 6px 5px rgba(153, 153, 153, .1);
		position: relative;

		image {
			width: 100%;
			border-radius: 12rpx;
		}

	}

	.cardtitle {
		position: absolute;
		background-color: white;
		bottom: 0;
		height: 80rpx;
		background-color: white;
		border-radius: 0 0 12rpx 12rpx;
		width: 100%;
		color: #666666;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		image {
			width: 28rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		span {
			height: normal;
			font-size: 28rpx;
			flex: 1;
			// padding:21rpx 20rpx 21rpx 20pt;
		}
	}

	.nav {
		background-color: white;
		padding: 28rpx 20rpx;
		border-radius: 12rpx 12rpx 0 0;
		height: 130rpx;
		ul {
			width: 100%;
			list-style: none;
			li {
				flex: 1;
				text-align: center;
				float: left;
				margin: 0px 20px;
			}
		}
	}

	.mine {
		ul {
			width: 101%;
			list-style: none;
			display: flex;
			flex-direction: row;

			li {
				flex: 1;
				text-align: center;
				background-color: white;
				color: black;
				margin-right: 10rpx;
				padding: 20rpx 10rpx;
				border-radius: 12rpx;
				box-sizing: border-box;
			}
		}
	}

	.Hawork {
		flex: 6;
		display: flex;
		flex-direction: column;
		position: relative;

		p {
			padding: 7rpx 10rpx;
		}
	}

	.qbx {
		color: #3E86F9;
		display: inline-block;
		vertical-align: bottom;
	}

	.bwork {
		background-color: white;
		padding: 4rpx 0;
		border-radius: 0 0 12rpx 12rpx;
		height: 600rpx;
		overflow-y: auto;
		ul {
			li {
				margin: 20rpx 0;
				border-bottom: 2rpx solid #ededed;
			}
		}
	}

	.sright-index {
		color: #999999;
		padding-right: 10rpx;
	}

	.title_label {
		font-size: 38rpx;
		font-weight: bold;
		position: relative;
		display: inline-block
	}

	.gtbx {
		position: absolute;
		right: 0;
		font-size: 28rpx;
	}
	
	.titlist {
		width: 100%;
		margin: 20rpx auto;
	}
	.titlists{
		position: absolute;
		background-color: white;
		z-index: 4;
		width: 100%;
	}
	.box4 {
	    background: #fff;
	    margin: 0px;
	    border-radius: 12rpx;
	    padding: 24upx;
		min-height: 300px;
	    .box4-item {
	        width: 100%;
	    }
	
	    .image {
	        width: 80upx;
	        height: 80upx;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	
	        .icons {
	            font-size: 45upx;
	            color: #fff;
	        }
	    }
	    .box4-start-title{
	        display: flex;
	        justify-content: flex-start;
	        position: sticky;
	        border-bottom: 1px solid #e9e9e9;
	        .name{
	            font-weight: bold;
	            font-size: 28rpx;
	        }
	        .box4-item-num{
	            height: 34upx;
	            width: 34upx;
	            border-radius: 20upx;
	            color: white;
	            background-color: rgb(34, 154, 252);
	            margin-left: 90upx;
	            margin-top: -20upx;
	            position: absolute;
	            text-align: center;
	            line-height: 34upx;
	            font-size: 28upx;
	        }
	    }
	}
</style>
